<template>
  <span  @click="getCode">{{ content }}<em v-show="showSecond">秒</em></span>
</template>
<script>
export default {
  name: "",
  props: ["mobile"],
  data() {
    return {
      content: "发送验证码",
      showSecond: false,
    };
  },
  
  created() {},
  methods: {
    getCode() {
      if (this.mobile) {
        let timer;
        this.content = 60;
        this.showSecond = true;
        timer = setInterval(() => {
          if (this.content > 0) {
            this.content--;
          } else {
            clearInterval(timer);
            this.showSecond = false;
            this.content = "发送验证码";
          }
        }, 1000);
        this.$emit("checkmobile", true);
      } else {
        this.$loading.show("请输入验证码");
        setTimeout(() => {
          this.$loading.hide();
        }, 1000);
      }
    },
  },
};
</script>

<style scoped lang="scss">
span {
  width: 100px;
  text-align: center;
  background-color: rgb(255, 0, 221);
  display: inline-block;
  color: rgb(0, 13, 255);
  vertical-align: middle;
  padding: 8px;
  border-radius: 8px;
}
</style>